<template>
  <div class="app-container">
    <!-- 查询条件开始 -->
    <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        label-width="98px"
    >
      <el-form-item label="供应商名称" prop="providerId">
        <el-select
            v-model="queryParams.data.providerId"
            placeholder="请选择供应商名称"
            clearable
            size="small"
            style="width: 180px"
        >
          <el-option
              v-for="dict in providerOptions"
              :key="dict.providerId"
              :label="dict.providerName"
              :value="dict.providerId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请人" prop="applyUserName">
        <el-input
            v-model="queryParams.data.applyUserName"
            placeholder="请输入申请人"
            clearable
            size="small"
            style="width: 180px"
        />
      </el-form-item>
      <el-form-item label="单据状态" prop="status">
        <el-select
            v-model="queryParams.data.status"
            placeholder="单据状态"
            clearable
            size="small"
            style="width: 180px"
        >
          <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button
            type="primary"
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
        >重置
        </el-button
        >
      </el-form-item>
    </el-form>
    <!-- 查询条件结束 -->


    <!-- 表格工具按钮开始 -->
    <el-row :gutter="10" style="margin-bottom: 8px">
      <el-col :span="1.5">
        <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleToNewPurchase"
        >新增采购
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleDoAudit"
        >提交审核
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="single"
            @click="handleDoInvalid"
        >作废
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleDoInventory"
        >提交入库
        </el-button
        >
      </el-col>
    </el-row>
    <!-- 表格工具按钮结束 -->

    <!-- 数据表格开始 -->
    <el-table
        v-loading="loading"
        border
        :data="purchaseTableList"
        @selection-change="handleSelectionChnage"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column
          label="单据ID"
          align="center"
          width="200"
          prop="purchaseId">
        <template slot-scope="scope">
          <span>{{ scope.row.purchaseId }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="供应商"
          width="180"
          align="center"
          prop="providerName"/>
      <!--:formatter="providerFormatter"-->
      <el-table-column
          label="采购批发总额"
          align="center"
          prop="purchaseTradeTotalAmount"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.purchaseTradeTotalAmount | rounding }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          min-width="120"
          fixed="right"
          label="状态">
        <template v-slot="{row}">
          <div v-for="item in statusOptions"
               :key="item.dictValue"
               :disabled="row.status===1">
            <span v-if="item.dictValue === row.status">
              {{ item.dictLabel }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="申请人" align="center" prop="applyUserName"/>
      <el-table-column
          label="入库操作人"
          align="center"
          prop="storageOptUser"
      />
      <el-table-column
          label="入库时间"
          width="180"
          align="center"
          prop="storageOptTime"
      />
      <el-table-column label="审核信息" align="center" prop="auditMsg"/>
      <el-table-column
          label="创建时间"
          width="180"
          align="center"
          prop="createTime"
      />
    </el-table>
    <!-- 数据表格结束 -->

    <!--分页  -->
    <el-pagination
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  // 过滤器
  filters: {
    // 保留两位小数
    rounding(value) {
      return value.toFixed(2);
      //return value
    },
  },
  data() {
    return {
// 是否启用遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,

      total: 0,
      // 分页数据总条数
      pageNo: 1,
      //每页的大小
      pageSize: 5,
      // 字典表格数据
      purchaseTableList: [],
      // 状态数据字典
      statusOptions: [],
      // 供应商的数据
      providerOptions: [],

      // 查询参数
      queryParams: {
        pageNo: undefined,
        pageSize: undefined,
        data: {},
        // providerId: undefined,
        // applyUserName: undefined,
        // status: undefined,
      },
    }
  },

  created() {
    //查询所有可用的供应商
    this.$http.get("/provider/getAll").then(result => {
      this.providerOptions = result.data.data.data;
      // console.log(this.providerOptions)
    })
    //查询状态
    this.$http.get("/stockRemoteDictData/queryByDictType?dictType=" + 'his_order_status').then(result => {
      this.statusOptions = result.data;
    })

    //所有待审核数据
    this.loadTable()
  },
  methods: {
    // 分页查询
    loadTable() {
      // this.loading = true; // 打开遮罩
      this.queryParams.pageNo = this.pageNo;
      this.queryParams.pageSize = this.pageSize;
      this.$http.post("/purchase/queryByPageNoWaitForReview", this.queryParams).then(res => {
        // console.log(res.data.data)

        this.purchaseTableList = res.data.data.list;
        this.total = res.data.data.total;
      })
    },

    // 提交审核
    handleDoAudit() {
      const purchaseId = this.ids[0];
      const tx = this;
      tx.$confirm("是否确认提交单据ID为:" + purchaseId + "的数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          //单据状态； 1未提交2待审核 3审核通过 4审核失败 5作废 6入库成功 字典表 his_order_status
          .then(() => {
            this.$http.put("/purchase/updateState/" + purchaseId + "/2/").then(res => {
              if (res.data.data.code == 500) {
                //打印res.data.message
                this.$notify({
                  title: '警告',
                  message: res.data.data.data,
                  type: 'warning'
                });
                this.loadTable();
              } else{
                //打印res.data.message
                this.$notify({
                  title: '成功',
                  message: res.data.data.data,
                  type: 'success'
                });
                this.loadTable();
              }
            })
          })
          .catch(() => {
            tx.$message.error("提交已取消");
          });
    },


    // 作废
    handleDoInvalid(row) {
      const purchaseId = this.ids[0];
      const tx = this;
      tx.$confirm("是否确认作废单据ID为:" + purchaseId + "的数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //单据状态； 1未提交2待审核 3审核通过 4审核失败 5作废 6入库成功 字典表 his_order_status
        this.$http.put("/purchase/updateStateVoid/" + purchaseId + "/5/").then(res => {
          if (res.data.data.code == 200){
            this.$notify({
              title: '成功',
              message: res.data.data.data,
              type: 'success'
            });
            this.loadTable();
          }else{
            this.$notify({
              title: '失败',
              message: res.data.data.data,
              type: 'warning'
            });
            this.loadTable();
          }
        })
            .catch(() => {
              tx.$message.error("作废失败");
            });
      })
          .catch(() => {
            tx.$message.error("作废已取消");
          });
    },


    // 执行入库
    handleDoInventory(row) {
      const purchaseId = this.ids[0];
      const tx = this;
      tx.$confirm(
          "是否确认提交入库单据ID为:" + purchaseId + "的数据?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      )
          .then(() => {
            this.$http.get("/purchase/ruk/" + purchaseId)
                .then((res) => {
                  if(res.data.code == 200){
                    tx.$notify({
                      title: '成功',
                      message: res.data.data,
                      type: 'success'
                    });
                    tx.loadTable();
                  }else {
                    tx.$notify({
                      title: '失败',
                      message: res.data.data,
                      type: 'warning'
                    });
                    tx.loadTable();
                  }
                })
                .catch(() => {
                  tx.$message.error("入库失败");
                });
            tx.loadTable();
          })
          .catch(() => {
            tx.$message.error("入库已取消");
          });

    },

    // 跳转到新增采购的路由页面
    handleToNewPurchase() {
      this.$router.replace("/stock/purchase/newPurchase");
    },
    // // 翻译供应商
    // providerFormatter(row) {
    //   let name = ''
    //   this.providerOptions.filter(item => {
    //     if (parseInt(row.providerId) === parseInt(item.providerId)) {
    //       name = item.providerName
    //     }
    //   })
    //   return name
    // },

    // 数据表格的多选择框选择时触发
    handleSelectionChnage(selection) {
      this.ids = selection.map((item) => item.purchaseId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    // 分页pageSize变化时触发
    handleSizeChange(val) {
      this.pageSize = val;
      // 重新查询
      this.loadTable();
    },
    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChange(val) {
      this.pageNo = val;
      // 重新查询
      this.loadTable();
    },

    // 条件查询
    handleQuery() {
      this.loadTable();
    },
    // 重置查询条件
    resetQuery() {
      //页面刷新
      location.reload();
    },
  }
}
</script>

<style scoped>

</style>